<template>
  <div id="app" class="tarot-app">
    <!-- 头部 -->
    <header class="app-header">
      <h1>🔮 塔罗牌占卜</h1>
      <p>探索内心的智慧，寻找人生的指引</p>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 步骤指示器 -->
      <div class="step-indicator">
        <div 
          v-for="(step, index) in processSteps" 
          :key="index"
          :class="['step', { active: currentStep === index, completed: currentStep > index }]"
        >
          <span class="step-number">{{ index + 1 }}</span>
          <span class="step-name">{{ step }}</span>
        </div>
      </div>

      <!-- 步骤内容 -->
      <div class="step-content">
        <!-- 问题聚焦步骤 -->
        <div v-if="currentStep === 0" class="step-panel">
          <h2>📝 问题聚焦</h2>
          <p class="step-description">
            请仔细思考你想要占卜的问题，将其具体化、清晰化。好的问题能带来更准确的指引。
          </p>
          
          <div class="question-input">
            <textarea 
              v-model="userQuestion" 
              placeholder="请描述你的问题或困扰..."
              rows="4"
              maxlength="200"
            ></textarea>
            <div class="question-validation">
              <div class="validation-score">
                <span>问题质量评分：</span>
                <span class="score">{{ questionValidation.score }}/5</span>
              </div>
              <div v-if="questionValidation.suggestions.length > 0" class="validation-suggestions">
                <p>💡 建议：</p>
                <ul>
                  <li v-for="(suggestion, index) in questionValidation.suggestions" :key="index">
                    {{ suggestion }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <button 
            @click="nextStep" 
            :disabled="!questionValidation.isValid"
            class="btn btn-primary"
          >
            下一步
          </button>
        </div>

        <!-- 阵型选择步骤 -->
        <div v-if="currentStep === 1" class="step-panel">
          <h2>🎴 阵型选择</h2>
          <p class="step-description">
            选择适合你问题的占卜阵型。不同的阵型适合不同类型的问题。
          </p>
          
          <div class="spread-selection">
            <div 
              v-for="(spread, key) in availableSpreads" 
              :key="key"
              :class="['spread-option', { selected: selectedSpreadKey === key }]"
              @click="selectSpread(key)"
            >
              <h3>{{ spread.name }}</h3>
              <p class="spread-description">{{ spread.description }}</p>
              <div class="spread-positions">
                <span v-for="(position, index) in spread.positions" :key="index" class="position-tag">
                  {{ position }}
                </span>
              </div>
            </div>
          </div>
          
          <div class="step-actions">
            <button @click="previousStep" class="btn btn-secondary">上一步</button>
            <button 
              @click="nextStep" 
              :disabled="!selectedSpreadKey"
              class="btn btn-primary"
            >
              下一步
            </button>
          </div>
        </div>

        <!-- 洗牌准备步骤 -->
        <div v-if="currentStep === 2" class="step-panel">
          <h2>🔄 洗牌准备</h2>
          <p class="step-description">
            通过洗牌来准备牌组，这个过程象征着清理心灵，为占卜做准备。
          </p>
          
          <div class="deck-status">
            <div class="status-item">
              <span class="label">总牌数：</span>
              <span class="value">{{ deckStatus.totalCards }}</span>
            </div>
            <div class="status-item">
              <span class="label">剩余牌数：</span>
              <span class="value">{{ deckStatus.remainingCards }}</span>
            </div>
            <div class="status-item">
              <span class="label">洗牌次数：</span>
              <span class="value">{{ deckStatus.shuffleCount }}</span>
            </div>
          </div>
          
          <div class="shuffle-actions">
            <button @click="shuffleDeck" class="btn btn-primary">
              🔄 洗牌
            </button>
            <button @click="resetDeck" class="btn btn-secondary">
              🔄 重置牌组
            </button>
          </div>
          
          <div class="step-actions">
            <button @click="previousStep" class="btn btn-secondary">上一步</button>
            <button 
              @click="nextStep" 
              :disabled="!deckStatus.isShuffled"
              class="btn btn-primary"
            >
              下一步
            </button>
          </div>
        </div>

        <!-- 抽牌过程步骤 -->
        <div v-if="currentStep === 3" class="step-panel">
          <h2>🎯 抽牌过程</h2>
          <p class="step-description">
            根据选择的阵型抽取相应数量的塔罗牌。
          </p>
          
          <!-- 阵型选择提示 -->
          <div v-if="!selectedSpread" class="spread-warning">
            <div class="warning-message">
              ⚠️ 请先返回上一步选择占卜阵型
            </div>
          </div>
          
          <div class="drawing-area">
            <div class="deck-visual">
              <div class="card-back">🃏</div>
              <span class="remaining-count">{{ deckStatus.remainingCards }}</span>
            </div>
            
            <div class="drawn-cards">
              <div 
                v-for="(card, index) in drawnCards" 
                :key="index"
                class="drawn-card"
              >
                <div class="card-front">
                  <h4>{{ card.name }}</h4>
                  <p class="card-element">{{ card.element }}</p>
                  <div class="card-orientation">
                    {{ card.isReversed ? '🔄 逆位' : '✅ 正位' }}
                  </div>
                </div>
                <div class="card-position">
                  {{ selectedSpread && selectedSpread.positions ? selectedSpread.positions[index] : '未知位置' }}
                </div>
              </div>
            </div>
          </div>
          
          <div class="draw-actions">
            <button 
              @click="drawCards" 
              :disabled="!selectedSpread"
              class="btn btn-primary"
            >
              🎯 抽牌
            </button>
            <button 
              @click="reshuffleAndDraw" 
              :disabled="!selectedSpread"
              class="btn btn-secondary"
            >
              🔄 重新洗牌并抽牌
            </button>
          </div>
          
          <div class="step-actions">
            <button @click="previousStep" class="btn btn-secondary">上一步</button>
            <button 
              @click="nextStep" 
              :disabled="drawnCards.length === 0"
              class="btn btn-primary"
            >
              下一步
            </button>
          </div>
        </div>

                 <!-- 结果解读步骤 -->
         <div v-if="currentStep === 4" class="step-panel">
           <h2>📖 结果解读</h2>
           <p class="step-description">
             解读每张牌的含义，理解它们如何回答你的问题。
           </p>
           
           <div class="interpretation-result">
             <pre>{{ interpretation }}</pre>
           </div>
           
           <div class="step-actions">
             <button @click="previousStep" class="btn btn-secondary">上一步</button>
             <button @click="nextStep" class="btn btn-primary">下一步</button>
           </div>
         </div>

         <!-- AI增强解读步骤 -->
         <div v-if="currentStep === 5" class="step-panel">
           <h2>🤖 AI增强解读</h2>
           <p class="step-description">
             AI智能分析你的问题和牌组，提供个性化解读和情感分析。
           </p>
           
           <div class="ai-controls">
             <div class="ai-mode-toggle">
               <label class="toggle-label">
                 <input 
                   type="checkbox" 
                   v-model="aiMode" 
                   @change="toggleAIMode"
                   class="toggle-input"
                 >
                 <span class="toggle-slider"></span>
                 <span class="toggle-text">{{ aiMode ? 'AI模式' : '本地模式' }}</span>
               </label>
             </div>
             
             <div class="ai-status">
               <span class="status-indicator" :class="{ active: aiMode }">
                 {{ aiMode ? '🔗 AI连接中' : '💻 本地分析' }}
               </span>
             </div>
           </div>
           
           <div v-if="!aiInterpretation" class="ai-generate">
             <button 
               @click="generateAIInterpretation" 
               :disabled="!interpretation"
               class="btn btn-primary ai-generate-btn"
             >
               🚀 生成AI增强解读
             </button>
             <p class="ai-note">
               💡 点击按钮开始AI智能分析，这将为你提供更深入的洞察和个性化建议
             </p>
           </div>
           
           <div v-else class="ai-interpretation-result">
             <div class="ai-header">
               <h3>🤖 AI智能分析结果</h3>
               <div class="ai-actions">
                 <button @click="regenerateAI" class="btn btn-secondary btn-sm">
                   🔄 重新生成
                 </button>
                 <button @click="saveAIResult" class="btn btn-primary btn-sm">
                   💾 保存结果
                 </button>
               </div>
             </div>
             
             <div class="ai-content">
               <pre>{{ aiInterpretation }}</pre>
             </div>
           </div>
           
           <div class="step-actions">
             <button @click="previousStep" class="btn btn-secondary">上一步</button>
             <button 
               @click="nextStep" 
               :disabled="!aiInterpretation"
               class="btn btn-primary"
             >
               下一步
             </button>
           </div>
         </div>

                 <!-- 叙事重构步骤 -->
         <div v-if="currentStep === 6" class="step-panel">
          <h2>🌟 叙事重构</h2>
          <p class="step-description">
            将塔罗牌的指引整合成完整的故事，帮助你重新理解现状和找到方向。
          </p>
          
          <div class="narrative-result">
            <pre>{{ narrative }}</pre>
          </div>
          
          <div class="final-actions">
            <button @click="saveResult" class="btn btn-primary">
              💾 保存结果
            </button>
            <button @click="startNewReading" class="btn btn-secondary">
              🔮 开始新的占卜
            </button>
          </div>
          
          <div class="step-actions">
            <button @click="previousStep" class="btn btn-secondary">上一步</button>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部信息 -->
    <footer class="app-footer">
      <p>塔罗牌占卜程序 - 基于Vue3和Vite构建</p>
      <p>记住：塔罗牌是镜子，反映的是你内心的智慧和直觉</p>
    </footer>
  </div>
</template>

<script>
import { TarotDeck, predefinedSpreads } from './utils/tarotDeck.js';
import { DivinationProcess } from './utils/divinationProcess.js';

export default {
  name: 'TarotApp',
  data() {
    return {
      // 占卜流程管理
      divinationProcess: new DivinationProcess(),
      currentStep: 0,
             processSteps: ['问题聚焦', '阵型选择', '洗牌准备', '抽牌过程', '结果解读', 'AI增强解读', '叙事重构'],
      
      // 用户输入
      userQuestion: '',
      questionValidation: { isValid: false, suggestions: [], score: 0 },
      
      // 阵型选择
      selectedSpreadKey: '',
      selectedSpread: null,
      availableSpreads: {
        singleCard: {
          name: '单张牌',
          description: '适合简单问题的快速指引',
          positions: ['当前状况']
        },
        threeCard: {
          name: '三张牌',
          description: '经典的时间线解读',
          positions: ['过去', '现在', '未来']
        },
        relationship: {
          name: '关系阵型',
          description: '专门用于关系问题的解读',
          positions: ['你的现状', '对方现状', '关系基础', '关系发展', '建议']
        },
        career: {
          name: '事业阵型',
          description: '针对事业发展的专业解读',
          positions: ['当前工作', '挑战', '机会', '建议', '结果']
        }
      },
      
      // 牌组管理
      tarotDeck: new TarotDeck(),
      deckStatus: { totalCards: 0, remainingCards: 0, drawnCards: 0, isShuffled: false, shuffleCount: 0 },
      
             // 抽牌结果
       drawnCards: [],
       interpretation: '',
       narrative: '',
       
       // AI增强功能
       aiMode: true, // 默认启用AI模式
       aiInterpretation: '',
       isGeneratingAI: false
    };
  },
  
  mounted() {
    this.updateDeckStatus();
    this.startDivination();
  },
  
  watch: {
    userQuestion(newQuestion) {
      this.questionValidation = this.divinationProcess.setUserQuestion(newQuestion);
    }
  },
  
  methods: {
    // 开始占卜
    startDivination() {
      const stepInfo = this.divinationProcess.startDivination();
      this.currentStep = 0;
      this.updateDeckStatus();
    },
    
    // 下一步
    nextStep() {
      if (this.currentStep < this.processSteps.length - 1) {
        this.currentStep++;
        this.updateDeckStatus();
      }
    },
    
    // 上一步
    previousStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
        this.updateDeckStatus();
      }
    },
    
    // 选择阵型
    selectSpread(spreadKey) {
      this.selectedSpreadKey = spreadKey;
      this.selectedSpread = this.availableSpreads[spreadKey];
      this.divinationProcess.selectSpread({
        getName: () => this.selectedSpread.name,
        getPositions: () => this.selectedSpread.positions
      });
    },
    
    // 洗牌
    shuffleDeck() {
      this.tarotDeck.shuffle();
      this.updateDeckStatus();
    },
    
    // 重置牌组
    resetDeck() {
      this.tarotDeck.reset();
      this.drawnCards = [];
      this.updateDeckStatus();
    },
    
    // 抽牌
    drawCards() {
      try {
        // 检查是否已选择阵型
        if (!this.selectedSpread || !this.selectedSpread.positions) {
          alert('请先选择占卜阵型');
          return;
        }
        
        const cardCount = this.selectedSpread.positions.length;
        this.drawnCards = this.tarotDeck.drawCards(cardCount);
        this.divinationProcess.setDrawnCards(this.drawnCards);
        this.interpretation = this.divinationProcess.generateInterpretation();
        this.narrative = this.divinationProcess.generateNarrativeReconstruction();
        this.updateDeckStatus();
      } catch (error) {
        alert('抽牌失败：' + error.message);
      }
    },
    
    // 重新洗牌并抽牌
    reshuffleAndDraw() {
      this.tarotDeck.reshuffle();
      this.drawCards();
    },
    
    // 更新牌组状态
    updateDeckStatus() {
      this.deckStatus = this.tarotDeck.getDeckStatus();
    },
    
    // 保存结果
    saveResult() {
      const result = this.divinationProcess.getCompleteResult();
      const resultText = JSON.stringify(result, null, 2);
      
      // 创建下载链接
      const blob = new Blob([resultText], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `塔罗牌占卜结果_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      
      alert('结果已保存！');
    },
    
         // 开始新的占卜
     startNewReading() {
       if (confirm('确定要开始新的占卜吗？当前结果将被清除。')) {
         this.divinationProcess.reset();
         this.tarotDeck.reset();
         this.userQuestion = '';
         this.questionValidation = { isValid: false, suggestions: [], score: 0 };
         this.selectedSpreadKey = '';
         this.selectedSpread = null;
         this.drawnCards = [];
         this.interpretation = '';
         this.narrative = '';
         this.aiInterpretation = '';
         this.aiMode = false;
         this.startDivination();
       }
     },
     
     // 切换AI模式
     toggleAIMode() {
       try {
         if (this.aiMode) {
           // 切换到本地模式
           aiService.localMode = true;
           console.log('已切换到本地AI模式');
         } else {
           // 切换到OpenAI模式
           aiService.localMode = false;
           console.log('已切换到OpenAI AI模式');
         }
       } catch (error) {
         console.error('AI模式切换失败:', error);
         alert('AI模式切换失败，将使用本地模式');
         this.aiMode = false;
         aiService.localMode = true;
       }
     },
     
     // 生成AI解读
     async generateAIInterpretation() {
       if (!this.interpretation) {
         alert('请先完成基础解读');
         return;
       }
       
       this.isGeneratingAI = true;
       
       try {
         this.aiInterpretation = await this.divinationProcess.generateAIEnhancedInterpretation();
       } catch (error) {
         console.error('AI解读生成失败:', error);
         alert('AI解读生成失败：' + error.message);
       } finally {
         this.isGeneratingAI = false;
       }
     },
     
     // 重新生成AI解读
     async regenerateAI() {
       this.aiInterpretation = '';
       await this.generateAIInterpretation();
     },
     
     // 保存AI结果
     saveAIResult() {
       if (!this.aiInterpretation) {
         alert('没有AI解读结果可保存');
         return;
       }
       
       const aiResult = {
         question: this.userQuestion,
         spread: this.selectedSpread ? this.selectedSpread.name : '',
         cards: this.drawnCards,
         interpretation: this.interpretation,
         aiInterpretation: this.aiInterpretation,
         narrative: this.narrative,
         timestamp: new Date().toLocaleString('zh-CN')
       };
       
       const resultText = JSON.stringify(aiResult, null, 2);
       const blob = new Blob([resultText], { type: 'application/json' });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
       a.download = `AI增强塔罗牌占卜结果_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
       
       alert('AI结果已保存！');
     }
  }
};
</script>

<style scoped>
.tarot-app {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #333;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

.app-header {
  text-align: center;
  padding: 2rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
}

.app-header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.app-header p {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.step-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50px;
  padding: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 1rem;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.step.active {
  opacity: 1;
  transform: scale(1.1);
}

.step.completed {
  opacity: 0.8;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #667eea;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.step.active .step-number {
  background: #4CAF50;
}

.step.completed .step-number {
  background: #2196F3;
}

.step-name {
  font-size: 0.9rem;
  text-align: center;
  white-space: nowrap;
}

.step-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.step-panel h2 {
  color: #667eea;
  margin-bottom: 1rem;
  text-align: center;
}

.step-description {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.question-input textarea {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 1rem;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.question-input textarea:focus {
  outline: none;
  border-color: #667eea;
}

.question-validation {
  margin-top: 1rem;
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 10px;
}

.validation-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.score {
  font-weight: bold;
  color: #667eea;
  font-size: 1.2rem;
}

.validation-suggestions ul {
  margin: 0.5rem 0 0 0;
  padding-left: 1.5rem;
}

.validation-suggestions li {
  margin-bottom: 0.5rem;
  color: #666;
}

.spread-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.spread-option {
  padding: 1.5rem;
  border: 2px solid #e0e0e0;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
}

.spread-option:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.spread-option.selected {
  border-color: #667eea;
  background: #f0f4ff;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.spread-option h3 {
  margin: 0 0 0.5rem 0;
  color: #667eea;
}

.spread-description {
  color: #666;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.spread-positions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.position-tag {
  background: #667eea;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
}

.deck-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.status-item {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
}

.status-item .label {
  display: block;
  color: #666;
  margin-bottom: 0.5rem;
}

.status-item .value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #667eea;
}

.shuffle-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.drawing-area {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.deck-visual {
  position: relative;
  text-align: center;
}

.card-back {
  font-size: 4rem;
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
}

.remaining-count {
  font-size: 1.2rem;
  font-weight: bold;
  color: #667eea;
}

.drawn-cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.drawn-card {
  text-align: center;
}

.card-front {
  background: white;
  border-radius: 15px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
  min-width: 120px;
}

.card-front h4 {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 0.9rem;
}

.card-element {
  color: #667eea;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.card-orientation {
  font-size: 0.8rem;
  color: #666;
}

.card-position {
  font-size: 0.8rem;
  color: #667eea;
  font-weight: bold;
}

.draw-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.interpretation-result,
.narrative-result {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  max-height: 400px;
  overflow-y: auto;
}

.interpretation-result pre,
.narrative-result pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.6;
}

.final-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

 .spread-warning {
   margin-bottom: 2rem;
   text-align: center;
 }

 .ai-controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 2rem;
   padding: 1rem;
   background: #f8f9fa;
   border-radius: 15px;
   border: 2px solid #e9ecef;
 }

 .ai-mode-toggle {
   display: flex;
   align-items: center;
   gap: 1rem;
 }

 .toggle-label {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   cursor: pointer;
   font-weight: bold;
   color: #667eea;
 }

 .toggle-input {
   display: none;
 }

 .toggle-slider {
   position: relative;
   width: 50px;
   height: 24px;
   background: #ccc;
   border-radius: 12px;
   transition: background 0.3s ease;
 }

 .toggle-slider:before {
   content: '';
   position: absolute;
   top: 2px;
   left: 2px;
   width: 20px;
   height: 20px;
   background: white;
   border-radius: 50%;
   transition: transform 0.3s ease;
 }

 .toggle-input:checked + .toggle-slider {
   background: #667eea;
 }

 .toggle-input:checked + .toggle-slider:before {
   transform: translateX(26px);
 }

 .toggle-text {
   font-size: 0.9rem;
 }

 .ai-status {
   display: flex;
   align-items: center;
 }

 .status-indicator {
   padding: 0.5rem 1rem;
   border-radius: 20px;
   font-size: 0.9rem;
   font-weight: bold;
   background: #e9ecef;
   color: #6c757d;
 }

 .status-indicator.active {
   background: #d4edda;
   color: #155724;
 }

 .ai-generate {
   text-align: center;
   margin-bottom: 2rem;
 }

 .ai-generate-btn {
   font-size: 1.2rem;
   padding: 1rem 2rem;
   margin-bottom: 1rem;
 }

 .ai-note {
   color: #666;
   font-size: 0.9rem;
   max-width: 500px;
   margin: 0 auto;
 }

 .ai-interpretation-result {
   background: #f8f9fa;
   border-radius: 15px;
   padding: 1.5rem;
   margin-bottom: 2rem;
   border: 2px solid #e9ecef;
 }

 .ai-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding-bottom: 1rem;
   border-bottom: 2px solid #dee2e6;
 }

 .ai-header h3 {
   margin: 0;
   color: #667eea;
   font-size: 1.3rem;
 }

 .ai-actions {
   display: flex;
   gap: 0.5rem;
 }

 .btn-sm {
   padding: 0.5rem 1rem;
   font-size: 0.9rem;
 }

 .ai-content {
   background: white;
   border-radius: 10px;
   padding: 1.5rem;
   max-height: 500px;
   overflow-y: auto;
 }

 .ai-content pre {
   margin: 0;
   white-space: pre-wrap;
   font-family: inherit;
   line-height: 1.6;
   color: #333;
 }

.warning-message {
  background: #fff3cd;
  color: #856404;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #ffeaa7;
  font-weight: bold;
  font-size: 1.1rem;
}

.step-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #5a6fd8;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
  border: 2px solid #e0e0e0;
}

.btn-secondary:hover:not(:disabled) {
  background: #e8e8e8;
  border-color: #ccc;
}

.app-footer {
  text-align: center;
  padding: 2rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  color: white;
  margin-top: 2rem;
}

.app-footer p {
  margin: 0.5rem 0;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .step-indicator {
    flex-direction: column;
    gap: 1rem;
  }
  
  .step {
    margin: 0;
  }
  
  .spread-selection {
    grid-template-columns: 1fr;
  }
  
  .drawing-area {
    flex-direction: column;
  }
  
  .drawn-cards {
    justify-content: center;
  }
  
  .shuffle-actions,
  .draw-actions,
  .final-actions,
  .step-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn {
    width: 100%;
    max-width: 300px;
  }
}
</style> 